<template>
  <view class="page">
    <view v-if="loading" class="loading">加载中...</view>
    <view v-else-if="!feedback" class="empty">未找到反馈</view>
    <view v-else class="content">
      <!-- 基本信息 -->
      <view class="section">
        <view class="header">
          <text class="badge type" :class="'type-' + feedback.type">{{ typeName(feedback.type) }}</text>
          <text class="badge status" :class="'status-' + feedback.status">{{ statusName(feedback.status) }}</text>
        </view>
        <view class="row">编号：{{ feedback.feedbackNo }}</view>
        <view class="row">时间：{{ feedback.createTime }}</view>
        <view class="row" v-if="feedback.contact">联系方式：{{ feedback.contact }}</view>
        <view class="row" v-if="feedback.orderNo">关联订单：{{ feedback.orderNo }}</view>
      </view>

      <!-- 反馈内容 -->
      <view class="section">
        <view class="title">反馈内容</view>
        <view class="desc">{{ feedback.content }}</view>
        <view class="images" v-if="feedback.images">
          <image
            v-for="(img, idx) in parseImages(feedback.images)"
            :key="idx"
            :src="img"
            mode="aspectFill"
            class="image"
            @click="preview(img, idx, parseImages(feedback.images))"
          />
        </view>
      </view>

      <!-- 状态操作 -->
      <view class="section">
        <view class="title">状态操作</view>
        <view class="actions">
          <button class="btn" @click="setStatus(0)">标记待处理</button>
          <button class="btn success" @click="setStatus(2)">标记已处理</button>
          <button class="btn danger" @click="setStatus(3)">关闭反馈</button>
        </view>
      </view>

      <!-- 回复列表 -->
      <view class="section" v-if="replies.length > 0">
        <view class="title">回复记录（{{ replies.length }}）</view>
        <view class="reply" v-for="(r, i) in replies" :key="i">
          <view class="reply-header">
            <text class="r-type" :class="'t-' + r.replyType">{{ r.replyType === 1 ? '平台回复' : '用户追加' }}</text>
            <text class="r-time">{{ r.createTime }}</text>
          </view>
          <view class="r-content">{{ r.content }}</view>
          <view class="images" v-if="r.images">
            <image
              v-for="(img, idx) in parseImages(r.images)"
              :key="idx"
              :src="img"
              mode="aspectFill"
              class="image"
              @click="preview(img, idx, parseImages(r.images))"
            />
          </view>
        </view>
      </view>

      <!-- 回复表单 -->
      <view class="section">
        <view class="title">回复用户</view>
        <textarea
          v-model="form.content"
          class="textarea"
          placeholder="请输入回复内容（最多500字）"
          :maxlength="500"
        />
        <view class="char">{{ form.content.length }}/500</view>
        <MultiImageUploader
          :images.sync="form.images"
          title="上传图片（可选）"
          tip="最多9张"
          :maxCount="9"
          :uploadUrl="uploadUrl"
          module="feedback"
        />
        <button class="submit" :loading="submitting" @click="doReply">提交回复</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getFeedbackReplies, replyFeedback, updateFeedbackStatus } from '@/api/feedback'
import MultiImageUploader from '@/components/MultiImageUploader.vue'

export default {
  components: { MultiImageUploader },
  data() {
    return {
      id: '',
      loading: true,
      submitting: false,
      feedback: null,
      replies: [],
      form: {
        content: '',
        images: []
      },
      uploadUrl: process.env.NODE_ENV === 'development'
        ? 'http://localhost:8080/api/file/upload'
        : 'https://xindian66.xyz/api/file/upload'
    }
  },
  onLoad(options) {
    this.id = options.id
    // 通过列表页的 eventChannel 传入初始详情，避免调用用户端详情接口
    try {
      const ec = this.getOpenerEventChannel && this.getOpenerEventChannel()
      ec && ec.on && ec.on('feedbackData', (data) => {
        if (data && !this.feedback) this.feedback = data
      })
    } catch (e) {}
    this.loadAll()
  },
  methods: {
    async loadAll() {
      this.loading = true
      try {
        const rs = await getFeedbackReplies(this.id)
        this.replies = Array.isArray(rs) ? rs : []
      } catch (e) {
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    parseImages(str) {
      try { return JSON.parse(str) } catch { return [] }
    },
    preview(current, currentIndex, urls) {
      uni.previewImage({ current: currentIndex, urls })
    },
    typeName(t) {
      const map = {1:'商品问题',2:'配送问题',3:'服务问题',4:'系统问题',5:'功能建议',6:'其他'}
      return map[t] || '其他'
    },
    statusName(s) {
      const map = {0:'待处理',1:'待处理',2:'已处理',3:'已关闭'}
      return map[s] || '未知'
    },
    async setStatus(status) {
      try {
        await updateFeedbackStatus(this.id, status)
        this.feedback.status = status
        uni.showToast({ title: '状态已更新', icon: 'success' })
      } catch (e) {}
    },
    async doReply() {
      if (!this.form.content.trim()) {
        uni.showToast({ title: '请输入回复内容', icon: 'none' })
        return
      }
      this.submitting = true
      try {
        await replyFeedback(this.id, { content: this.form.content, images: this.form.images })
        uni.showToast({ title: '回复成功', icon: 'success' })
        this.form.content = ''
        this.form.images = []
        const rs = await getFeedbackReplies(this.id)
        this.replies = Array.isArray(rs) ? rs : []
      } catch (e) {
        // 已有统一提示
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page { min-height: 100vh; background: #f5f7fa; }
.loading, .empty { text-align:center; color:#999; padding: 120rpx 0; }
.content { padding: 16rpx; }
.section { background:#fff; border-radius: 12rpx; padding: 16rpx; margin-bottom: 12rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); }
.header { display:flex; gap: 8rpx; margin-bottom: 8rpx; }
.badge { padding: 4rpx 10rpx; border-radius: 6rpx; font-size: 22rpx; }
.badge.type { background:#eef; color:#345; }
.badge.status { background:#efe; color:#153; }
.badge.status.status-1 { background:#cfe2ff; color:#084298; }
.badge.status.status-2 { background:#d1e7dd; color:#0f5132; }
.badge.status.status-3 { background:#e2e3e5; color:#383d41; }
.row { font-size: 26rpx; color:#666; margin: 4rpx 0; }
.title { font-size: 28rpx; font-weight: 600; margin-bottom: 8rpx; }
.desc { font-size: 28rpx; color:#333; white-space: pre-wrap; }
.images { display:flex; flex-wrap:wrap; gap: 12rpx; margin-top: 10rpx; }
.image { width: 200rpx; height: 200rpx; border-radius:8rpx; background:#f0f0f0; }
.reply { background:#f9f9f9; border-radius: 10rpx; padding: 12rpx; margin-bottom: 10rpx; }
.reply-header { display:flex; justify-content:space-between; font-size: 24rpx; color:#999; margin-bottom: 6rpx; }
.r-type.t-1 { color:#084298; }
.r-type.t-2 { color:#0f5132; }
.textarea { width:100%; min-height: 120rpx; border: 1rpx solid #eee; border-radius: 8rpx; padding: 12rpx; background:#fafafa; box-sizing:border-box; }
.char { text-align:right; font-size: 24rpx; color:#999; margin: 6rpx 0 10rpx; }
.actions { display:flex; gap: 10rpx; }
.btn { background:#f0f0f0; color:#333; border:none; border-radius:8rpx; padding: 12rpx 16rpx; font-size: 24rpx; }
.btn.success { background:#1abc9c; color:#fff; }
.btn.danger { background:#e74c3c; color:#fff; }
.submit { width:100%; background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; border:none; border-radius:8rpx; padding: 14rpx; font-size: 28rpx; }
</style>
